<template>
  <div class="card">
    <el-link class="back" @click="handleBack"><el-icon><Back /></el-icon>返回 </el-link>
    <div class="detail-box">
      <div class="detail-left">
        <p class="title"><img width="18" class="middle" src="@/assets/images/tag.png" alt="" /> <span class="middle">案例展示</span></p>
        <p class="desc">
          文案标题文案标题文案标题文文案标题文案标题文案标题文文案标题文案标题文案标题文文案标题文案标题文案标题文文案标题文案标题文案标题文文案标题文案标题文案标题文
        </p>
        <div :class="['list', list.length > 1 ? 'list-2' : '']">
          <motion.div 
            v-for="(item, index) in list" :key="index"
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ duration: 0.3, delay: index * 0.1 }"
          >
            <img src="@/assets/images/img.png" alt="">
          </motion.div>
        </div>
        <p class="title"><img width="18" class="middle" src="@/assets/images/note.png" alt="" /> <span class="middle">模型描述</span></p>
        <div class="info">
          框架精心训练，依托原创优质数据集，赋予其卓越的生成能力。出图风格唯美，以柔和的光线营造氛围，花朵铺垫画面，展现出独特的艺术美感。生成效果媲美商业摄影水准，每一帧都散发着精致与高级的质感，完美契合香水、美妆等电商产品的视觉需求。
          可搭配大模型：miluo-flux-pro （点击跳转）<br>
          适配模型：高级质感人像-FLUX(点击跳转）<br>
          使用说明<br>
          大模型推荐：miluo-flux-pro(点击跳转大模型页面)<br>
          迭代步数：30<br>
          权重：0.8-1<br>
          CFG引导：3.5（使用推荐工作流可省略此设置）<br>
          触发词：miluo_mzb
        </div>
      </div>
      <div class="detail-right">
        <div class="box">
          <p class="title"> <img width="18" class="middle" src="@/assets/images/code.png" alt="" /> <span class="middle">源代码</span></p>
          <div class="btn-box">
            <el-button>
              <img width="18" src="@/assets/images/icon-logo.png" alt="" /> &nbsp; 34 &nbsp; &nbsp;  <el-icon :size="20"><Download /></el-icon>下载
            </el-button>
          </div>
        </div>
        <div class="box">
          <p class="title"><img width="22" class="middle" src="@/assets/images/source.png" alt="" /> <span class="middle">使用模型</span></p>
          <div class="btn-box">
            <el-button>
              <img width="18" src="@/assets/images/icon-logo.png" alt="" /> &nbsp; 34 &nbsp; &nbsp;  <el-icon :size="20"><Download /></el-icon>下载
            </el-button>
          </div>
        </div>
        <div class="box">
          <p class="title"><img width="22" class="middle" src="@/assets/images/desc.png" alt="" /> <span class="middle">使用说明</span></p>
          <div class="info">
            [{
            "url":"https://139.66.1.120/query-general-data/service",
            "mediaType":["JSON"]  
            }]
            { "requestId": "api-bkzx-80de8a04-3ebd-45cd-b014-86c3baae[{4-3ebd-45cd-b014-86c3baae[{
            "url":"https://139.66.1.120/query-general-service",4-3ebd-45cdb014-86c3baae[{
            "url":"https://139.66.1.120/query-general-data/service",
            }][{
            "url":"https://139.66.1.120/query-general-service",4-3ebd-45cdb014-86c3baae[{
            "url":"https://139.66.1.120/query-general-data/service",
            }][{
            "url":"https://139.66.1.120/query-general-data/service",
            "mediaType":["JSON"]  
            }]
            { "requestId": "api-bkzx-80de8a04-3ebd-45cd-b014-86c3baae[{
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { motion } from "motion-v"
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const handleBack = () => {
  router.back()
}
const list = ref([{}, {}])
</script>
<style lang="scss" scoped>
.back {
  font-size: 20px;
  margin-bottom: 20px;
}
.detail-box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }
  .desc{
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }
  .detail-left{
    width: 65%;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #E0E0E0;
    .list{
      &-2{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
        gap: 20px;
      }
      margin: 0 auto 30px;
      img{
        width: 100%;
      }
    }
    .info{
      color: rgba(0,10,32,0.85);
      font-size: 16px;
    }
  }
  .detail-right{
    width: 35%;
    .box{
      background: #F3F5F9;
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 20px;
      .title{
        border-bottom: 1px solid #E0E0E0;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
      .btn-box{
        text-align: center;
        padding: 25px 20px;
        .el-button{
          width: 60%;
          color: #333;
          border-radius: 40px;
          height: 54px;
          font-size: 18px;
        }
      }
      .info{
        color: rgba(0,10,32,0.85);
      }
    }
  }
}
</style>